<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div
      class="user-main-box"
      style="position: relative; width: 100%; height: 600px"
      v-if="getDNSLoading"
    >
      <Spin :withIcon="true"></Spin>
    </div>
    <template v-else>
      <div v-if="getDNSResult" class="user-main-box">
        <user-tab-list
          :list="tablist"
          :returnButton="true"
          backUrl="/user/mydn"
        ></user-tab-list>
        <div
          class="form-input-area"
          style="padding: 20px 40px 30px; position: relative"
        >
          <Spin :withIcon="true" v-if="formLoading"></Spin>
          <div
            class="tips-area tips-icon"
            style="margin-bottom: 20px"
            :style="{
              backgroundImage: `url(${require('_a/userImages/' +
                (colorType == 0
                  ? 'tips-icon'
                  : colorType == 1
                  ? 'tips-icon-g'
                  : colorType == 2
                  ? 'tips-icon-b'
                  : 'tips-icon-p') +
                '@2x.png')})`,
            }"
          >
            温馨提示：若您的域名已添加解析记录，请勿随意修改解析DNS，否则将导致原解析记录不生效，请谨慎操作！
          </div>
          <div class="flx-row-s-c div-line long-name-nece">
            <div class="long-name">域名</div>
            <span class="f-16 c-o">{{ dn }}</span>
          </div>
          <div class="flx-row-s-c div-line long-name-nece">
            <div class="long-name">DNS类型</div>
            <RadioGroup v-model="type">
              <Radio
                v-for="(item, index) in typeList"
                :key="index"
                class="radio-mg-r-20"
                :label="item.value"
                >{{ item.name }}</Radio
              >
            </RadioGroup>
          </div>
          <div class="flx-row-s-s div-line long-name-nece">
            <div class="long-name">DNS记录值</div>
            <div class="flx-row-s-c dns-list-area" v-if="type == 0">
              <div
                v-for="(item, index) in dnsList0"
                :key="'i' + index"
                class="flx-row-s-c"
                style="margin-bottom: 10px; height: 32px"
              >
                <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
                <div class="f-d2" style="width: 200px; margin-right: 10px">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="flx-row-s-c dns-list-area" v-else-if="type == 2">
              <div
                v-for="(item, index) in dnsList1"
                :key="'i' + index"
                class="flx-row-s-c"
                style="margin-bottom: 10px; height: 32px"
              >
                <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
                <div class="f-d2" style="width: 200px; margin-right: 10px">
                  {{ item }}
                </div>
              </div>
            </div>
            <div v-else-if="type == 1" class="flx-row-s-s">
              <div>
                <div
                  class="flx-row-s-c dns-list-area"
                  v-for="(item, index) in dnsInputList"
                  :key="index"
                >
                  <div
                    v-for="(items, index1) in item.list"
                    :key="'i' + index1"
                    class="flx-row-s-c"
                    style="margin-bottom: 10px"
                  >
                    <div class="f-14 c-g">
                      DNS{{ index * 2 + index1 + 1 }}：
                    </div>
                    <Input
                      v-model="dnsInputList[index].list[index1]"
                      placeholder="请填写"
                      :value="items"
                      style="width: 200px; margin-right: 10px"
                    />
                  </div>
                </div>
              </div>

              <div
                v-show="dnsInputList.length > 1"
                class="btn-add"
                @click="cutEvent"
              >
                -
              </div>
              <div
                v-show="dnsInputList.length < 6"
                class="btn-add"
                @click="addEvent"
              >
                +
              </div>
            </div>
          </div>
          <div class="btn-area">
            <div class="flx-row-s-c div-line">
              <Checkbox v-model="agree"></Checkbox>
              我已同意并阅读
              <span class="o-form-font-button" @click="ruleModelShow = true"
                >《{{ ruleTitle }}》</span
              >
            </div>
            <div
              class="user-strong-button submit-button-style div-line"
              @click="submit"
            >
              确定修改
            </div>
          </div>
        </div>
      </div>

      <div v-if="getDNSResult" class="user-main-box pub-m-t-20">
        <user-tab-list :list="tablistTemp"></user-tab-list>
        <div style="position: relative">
          <Spin :withIcon="true" v-if="listLoading"></Spin>
          <table class="table-area" style="margin-top: 20px">
            <thead>
              <tr>
                <th><div class="line-style">修改时间</div></th>
                <th><div class="line-style">原DNS</div></th>
                <th><div class="line-style">新DNS</div></th>
                <th><div class="line-style">状态</div></th>
                <th><div class="line-style">备注</div></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in list" :key="index">
                <td>
                  <div class="line-style">
                    <span class="normal-f">{{ item.createdTime }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{
                      item.oldDnsAddr
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{
                      item.newDnsAddr
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{
                        item.status === 2 ? '成功' : item.status === 3 ? '失败' : '处理中'
                      }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span :title="item.status === 1 ? '已提交，结果查询中' : item.remark" class="normal-f f-ell-sin">{{
                        item.status === 1 ? '已提交，结果查询中' : item.remark
                      }}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <Empty-State
            v-if="total != null && total == 0"
            content="未搜索到任何内容！"
          ></Empty-State>
          <div class="form-page-bottom-area flx-row-c-c">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>

      <div class="user-main-box" v-if="!getDNSResult">
        <Empty-State content="DNS信息加载失败！"></Empty-State>
      </div>
    </template>
    <rule-modal
      :show.sync="ruleModelShow"
      :content="ruleContent"
      :title="ruleTitle"
    ></rule-modal>
    <dnsResultModal
      title="DNS设置结果"
      :show.sync="showResult"
      :sucList="resultList"
    ></dnsResultModal>
  </div>
</template>

<script>

import dnsRules from "@/static/dnsRules";
import { getBottom } from "@/api/data";
// const bottomInfoUrl =
//   process.env.NODE_ENV === "development"
//     ? config2.bottomInfoUrl.dev
//     : config2.bottomInfoUrl.pro;
import { setDNS, getDNS, getDNSLog } from "@/api/user";

export default {
  name: "VipDNS",
  components: {
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
    dnsResultModal: () => import("_c/modal/dnsResultModal/dnsResultModal.vue"),
  },
  data() {
    return {
      colorType: 0,
      ruleModelShow: false,
      ruleContent: "",
      ruleTitle: "",

      getDNSLoading: false,
      formLoading: false,
      listLoading: false,
      getDNSResult: null,
      breadCrumb: [
        { name: "域名管理" },
        { name: "我的域名" },
        { name: "DNS设置" },
      ],
      tablist: [
        {
          name: "DNS设置",
          to: "/user/dns",
        },
      ],
      tablistTemp: [
        {
          name: "DNS修改记录",
          to: "/user/dns",
        },
      ],
      test: "",

      // 表单信息
      domainId: null,
      dn: "",
      type: null,
      typeList: [
        {
          name: "出售页DNS",
          value: 0,
        },
        {
          name: "解析DNS",
          value: 2,
        },
        {
          name: "第三方DNS",
          value: 1,
        },
      ],
      dnsList0: [],
      dnsList1: [],
      dnsInputList: [{ list: ["", ""] }],
      agree: false,

      // 分页设置
      total: null,
      pageSizeOpts: [10, 20, 50, 100, 200],
      pageSize: 10,
      page: 1,
      list: [],

      showResult: false,
      resultList: [],
    };
  },
  created() {
    this.ruleTitle = dnsRules.title;
    this.ruleContent = dnsRules.content;

    let dn = this.$route.query.dn;
    this.getDNSLoading = true;
    if (dn) {
      this.domainId = dn;
      this.dn = this.$route.query.name;
      this.getDNS();
    }
    this.getDNSLoading = false;
  },
  mounted() {
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
    cutEvent() {
      this.dnsInputList.splice(this.dnsInputList.length - 1, 1);
    },
    addEvent() {
      let obj = {};
      obj.list = ["", ""];
      this.dnsInputList.push(obj);
    },

    // 获取DNS
    async getDNS() {
      let res = await getDNS({
        domainId: this.domainId,
      });
      if (res.code == 200) {
        this.type = res.data.dnsPlatform;
        // 出售页DNS
        this.dnsList0 = res.data.defaultValueList.filter(
          (item) => item.dnsPlatform == 0
        )[0].values;
        // 解析DNS
        this.dnsList1 = res.data.defaultValueList.filter(
          (item) => item.dnsPlatform == 2
        )[0].values;

        if (res.data.dnsPlatform == 0) {
          if (res.data.dnsList.length > 0) {
            this.dnsList0 = res.data.dnsList;
          }
        } else if (res.data.dnsPlatform == 2) {
          if (res.data.dnsList.length > 0) {
            this.dnsList1 = res.data.dnsList;
          }
        } else if (res.data.dnsPlatform == 1) {
          this.dnsInputList = this.handleList(res.data.dnsList, 2);
        }
        this.getDNSResult = true;

        this.getDNSLog();
      }
    },
    handleList(array, subGroupLength) {
      let index = 0;
      const newArray = [];
      while (index < array.length) {
        let obj = {};
        obj.list = array.slice(index, (index += subGroupLength));
        if (obj.list.length == 1) {
          obj.list.push("");
        }
        newArray.push(obj);
      }
      return newArray;
    },
    // 提交表单
    submit() {
      if (this.type == null) {
        this.$Message.warning("请选择DNS类型！");
        return;
      }
      if (!this.agree) {
        this.$Message.warning(`请同意并阅读《${this.ruleTitle}》！`);
        return;
      }
      let domainId = [];
      domainId.push(this.domainId);
      let params = {
        domainIds: domainId,
        dnsPlatform: this.type,
      };
      if (this.type == 1) {
        let DNSList = [];
        this.dnsInputList.map((item) => {
          let arr = [];
          arr = item.list.filter((item) => item != null && item != "");
          DNSList.push(...arr);
        });
        if (DNSList.length <= 0) {
          this.$Message.warning("请至少输入一个DNS！");
          return;
        } else {
          params.dnsList = DNSList;
        }
      }
      this.$Modal.confirm({
        title: "确认修改",
        content: "<p>确定要修改DNS设置吗？</p>",
        onOk: async () => {
          this.formLoading = true;
          let { code, data, result } = await setDNS(params);
          if (code === 200 && result && data.length === 0) {
            this.$Message.success("修改成功！");
          } else {
            this.showResult = true;
            this.resultList = data;
          }
          this.formLoading = false;
          this.getDNSLog();
        },
      });
    },
    // 获取提现记录列表
    async getDNSLog() {
      this.listLoading = true;
      let params = {
        domainId: this.domainId,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getDNSLog(params);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.listLoading = false;
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getDNSLog();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.dns-list-area {
  width: 560px;
  flex-wrap: wrap;
}
.long-name {
  min-width: 80px;
}
.btn-area {
  border-top: 1px solid #e4e6fa;
  padding-top: 30px;
  margin-top: 30px;
  .submit-button-style-first {
    margin-left: 110px;
  }
}
.box-area {
  width: 800px;
  border: #eaeaea solid 1px;
  padding: 20px 30px 30px;
  border-radius: 5px;

  .line-item {
    margin-bottom: 13px;
  }
  .name {
    width: 90px;
    text-align: right;
    margin-right: 15px;
    font-size: 14px;
    color: #3d3d3d;
    line-height: 32px;

    &::after {
      content: ":";
    }
  }
  .bank-font {
    text-align: left;
  }
  .bank-number {
    font-size: 12px;
    color: #999999;
  }
  .pay-method-box {
    @include size(150px, 50px);
    border: 1px solid #dcdee2;
    padding: 12px 13px 12px 53px;
    border-radius: 5px;
    transition: border-color 0.3s, color 0.3s;
    font-size: 14px;
    color: rgba(#3d3d3d, 0.9);
    cursor: pointer;
    margin-right: 20px;
    &:hover,
    .active {
      border-color: $mainColor;
      color: $mainColor;
    }

    &.p-i-1 {
      @include bg-setting("p-i-1", 24px 24px, 19px center);
    }
    &.p-i-2 {
      @include bg-setting("p-i-2", 27px 25px, 13px center);
    }
    &.p-i-3 {
      @include bg-setting("p-i-3", 31px 19px, 13px center);
    }
  }
  .submit-button-size {
    @include size(100px, 30px);
    @include btn-s(null, 30px, 5px);
    margin-left: 105px;
  }
  .box-title {
    font-size: 14px;
    color: #3d3d3d;
    border-bottom: $mainColor solid 2px;
    line-height: 30px;
    width: max-content;
  }
  img {
    width: 195px;
    margin-top: 20px;
    margin-right: 38px;
  }
}
.bankNumber {
  border: 1px solid #dcdee2;
  border-radius: 4px;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 14px;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  background-color: #fff;
  color: #20213c;
}
.bankNumber::placeholder {
  color: #c5c8ce;
}
.bankNumber:focus,
.bankNumber:hover {
  border-color: $mainColor !important;
  box-shadow: none !important;
}
.btn-add {
  width: 32px;
  height: 32px;
  line-height: 26px;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #dcdee2;
  border-radius: 50%;
  text-align: center;
  margin-left: 20px;
  // margin-top: -8px;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background-color: $mainColor;
    border-color: $mainColor;
    color: #fff;
  }
}
</style>
